<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="utf-8">
    <title>欢迎使用mdms</title>

    <link th:href="@{/easyui/themes/default/easyui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/easyui/themes/icon.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/easyui/demo/demo.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/selfcss/mainframe.css}" rel="stylesheet" type="text/css"/>

    <script th:src="@{/easyui/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/easyui/jquery.easyui.min.js}" type="text/javascript"></script>
    <script th:src="@{/codemirror/codemirror.js}" type="text/javascript"></script>
    <script th:src="@{/fly/fly.js}" type="text/javascript"></script>
    <script th:src="@{/selfjs/FlyRequest.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/CommonParam.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/aes.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/AesUtil.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/Barrett.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/BigInt.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/pbkdf2.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/RSA.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/SHA.js}" type="text/javascript"></script>
</head>
<body>

<div id="mainLayout" class="easyui-layout" data-options="fit: true">
    <div data-options="region:'north',border:false" style="height:108px;overflow: hidden;">
        <div id="topbar"
             style="width: 100%;height:52px; background: #ffffff url('/static/images/mosaic-pattern.png') repeat;opacity:0.8;">
            <div class="top-bar-left">
                <h2 style="margin-left: 10px; margin-top: 10px;color: #a82323"><img th:src="@{/images/logo.png}"><span
                        style="color:#31bfd7;font-size:30px; font-weight:bold;"> MDMS</span>
                    <span style="color: #b65a5a;font-size:23px;" th:text="${mdmsVer}"></span>
                </h2>
            </div>
            <div class="top-bar-right">
                <div id="timerSpan">
                    <div style="padding:5px;height:auto;float: right;">
                        <div style="padding-right:20px;height:auto">
                            <div style="padding-right:20px; display:inline; cursor:pointer;"
                                 th:if="${userType} == '99'">
                                <img th:src="@{/images/user.gif}" onclick="javascript:userMng()" title="用户管理"/>
                            </div>
                            <div style="padding-right:20px; display:inline; cursor:pointer;"
                                 th:if="${userType} == '99'">
                                <img th:src="@{/images/database.gif}" onclick="javascript:databaseMng()" title="数据库管理"/>
                            </div>
                            <div style="padding-right:20px; display:inline; cursor:pointer;"
                                 th:if="${userType} == '99'">
                                <img th:src="@{/images/terminal.gif}" onclick="javascript:sshServerMng()"
                                     title="web终端管理"/>
                            </div>
                            <div style="padding-right:20px; display:inline; cursor:pointer;"
                                 th:if="${userType} == '1' or ${userType} == '99'">
                                <img th:src="@{/images/log.gif}" onclick="javascript:userLog()" title="操作日志查询"/>
                            </div>
                            <div style="padding-right:20px; display:inline; cursor:pointer;">
                                <img th:src="@{/images/guanzhu.gif}" onclick="javascript:guanzhu()" title="关注"/>
                            </div>
                            <div style="padding-right:20px; display:inline; cursor:pointer;">
                                <img th:src="@{/images/changepassword.gif}" onclick="javascript:openChangePasswordDlg()"
                                     title="修改密码"/>
                            </div>
                            <div style="padding-right:20px; display:inline; cursor:pointer;">
                                <img th:src="@{/images/logout.gif}" onclick="javascript:logout()" title="登出系统"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="toolbar" class="panel-header panel-header-noborder top-toolbar">
            <div id="infobar">
                <span th:text="|欢迎登陆，${userName}|" class="icon-diy-user2"
                      style="padding-left: 20px; background-position: left center;">
                </span>
            </div>
            <div id="buttonbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-diy-terminal1" plain="true"
                   onclick="webTerminal()">web终端</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-diy-datachange1" plain="true"
                   th:if="${userType} == '0' or ${userType} == '1'"
                   onclick="dataChangeApply()">数据变更申请</a>
            </div>
        </div>
    </div>
    <div data-options="region:'west',split:true,title:'数据库选择'" style="width:300px;padding:0px;">
        <div id="eastLayout" class="easyui-layout" data-options="fit: true">
            <div data-options="region: 'north', split: false, border: false" style="height: 34px;">
                <select id="databaseSelect" class="easyui-combobox" style="width:100%;"
                        data-options="panelHeight:'auto',prompt:'请选择数据库'"
                ></select>
            </div>

            <div data-options="region: 'center', border: false, title: '数据库', iconCls: 'icon-diy-database1'">
                <table id="databaseInfo" style="width:100%;height:100%"></table>
            </div>
        </div>
    </div>
    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">
        右边区域内容请等待
    </div>
    <div region="south" style="height:27px;;background: no-repeat center top;">
        <div style=" text-align: center;">Powered by &nbsp;
            <a href="https://gitee.com/feiweihy/mdms" target="_blank">MDMS</a>
            Copyright © 2020-2021 fengwei
        </div>
    </div>


    <div data-options="region:'center'" id="tt" class="easyui-tabs" style="overflow: hidden;" fit=“true”>
    </div>
</div>

<!-- 关注模块 -->
<div id="guanzhuDlg" class="easyui-dialog" style="width:300px;height:400px;padding:10px 20px"
     closed="true" closable="true" modal="true">
    <form id="googleAuthLoginForm" method="post" novalidate>
        <div style="text-align: center;"><h5>关注公众号，不定期推送技术干货！</h5></div>
        <img src="" class="height:200px;width:200px" id="guanzhuimg">
    </form>
</div>

<!-- 修改密码模块 -->
<div id="changePasswordDlg" class="easyui-dialog" style="width:350px;height:270px;padding:10px 20px"
     closed="true" closable="false" modal="true" buttons="#changePasswordDlg-buttons">
    <form id="changePasswordForm" method="post" novalidate>
        <table cellpadding="5">
            <tr>
                <td>原密码:</td>
                <td><input name="oldUserPassword" class="easyui-passwordbox" type="text" required="true"
                           missingMessage="不能为空"/></td>
            </tr>
            <tr>
                <td>新密码:</td>
                <td><input name="userPassword" class="easyui-passwordbox" type="text" required="true"
                           missingMessage="不能为空"/></td>
            </tr>
            <tr>
                <td>重复新密码:</td>
                <td><input name="repeatUserPassword" class="easyui-passwordbox" type="text" required="true"
                           missingMessage="不能为空"/></td>
            </tr>
        </table>
    </form>
</div>
<div id="changePasswordDlg-buttons">
    <a id="changePasswordDlgCloseBtn" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#changePasswordDlg').dialog('close')">
        取消</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="changePassword()">保存</a>
</div>

<!-- 远程终端服务器列表模块 -->
<div id="sshServerDlg" class="easyui-dialog" style="width:270px;height:400px;padding:0px 0px"
     closed="true" closable="true" modal="true">
    <table id="sshServerInfo" style="width:100%;height:100%"></table>
</div>

<script type="text/javascript">
    let ctxPath = '[[${#servletContext.contextPath}]]';
    let ifChangepwd = '[[${ifChangepwd}]]';
    let userType = [[${userType}]];
    $(function () {

        $('#tt').tabs('add', {
            title: '运行及展示',
            content: '<iframe src="' + ctxPath + '/excuteAndShow/loadPage" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px;" width="100%" height = "99.5%" frameborder = "0" / > ',
            closable: false,
            iconCls: 'icon-diy-dashboard1'
        });

        //列出当前用户拥有的所有数据库
        let submitData = {};
        postJSON(ctxPath + '/mdmsDatabase/queryMyDatabases', submitData,
            function (data) {
                $('#databaseSelect').combobox({
                    data: data['list']
                    , valueField: 'id'
                    , textField: 'databaseName'
                });
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });

        //列出表格
        $('#databaseInfo').treegrid({
            idField: 'id',
            treeField: 'name',
            columns: [
                [
                    {title: '详情', field: 'name', width: 270, formatter: formatTableName}
                ]
            ],
            onDblClickCell: function (field, row) {
                if (row.name == '表') {
                    return;
                }
                if (row.name == '...') {
                    $.messager.show({
                        title: '提示',
                        msg: '这里还有很多表，具体功能怎么做还没想好等以后再说',
                        showType: 'show'
                    });
                    return;
                }
                $('#tt').tabs('close', row.name);
                $('#tt').tabs('add', {
                    title: row.name,
                    content: '<iframe src="' + ctxPath + '/table/loadPage?table=' + row.name + '" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px" width="100%" height="99.5%" frameborder="0"/>',
                    closable: true,
                    iconCls: 'icon-diy-table1'
                });
            }
        });

        //列出表格
        $('#sshServerInfo').treegrid({
            idField: 'id',
            treeField: 'name',
            columns: [
                [
                    {title: '服务器', field: 'name', width: 230, formatter: formatTableName}
                ]
            ],
            onDblClickCell: function (field, row) {
                if (row.type == 'server') {
                    return;
                }
                window.open(ctxPath + "/webSSH/loadPage?id=" + row.id);
            }
        });

        //密码还是初始密码
        if (ifChangepwd == 'N') {
            $("#changePasswordDlgCloseBtn").css('visibility', 'hidden');
            $('#changePasswordDlg').dialog('open').dialog('setTitle', '修改密码');
        }
    });

    function formatTableName(val, row) {
        return '<span style="color:black;font-size:5px">' + val + '</span>';
    }

    function sshServerMng() {
        $('#tt').tabs('close', 'web终端管理');
        $('#tt').tabs('add', {
            title: 'web终端管理',
            content: '<iframe src="' + ctxPath + '/mdmsSshserver/loadPage" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px" width="100%" height="99.5%" frameborder="0"/>',
            closable: true,
            iconCls: 'icon-diy-user1'
        });
    }

    function userMng() {
        $('#tt').tabs('close', '用户管理');
        $('#tt').tabs('add', {
            title: '用户管理',
            content: '<iframe src="' + ctxPath + '/mdmsUser/loadPage" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px" width="100%" height="99.5%" frameborder="0"/>',
            closable: true,
            iconCls: 'icon-diy-user1'
        });
    }

    function databaseMng() {
        $('#tt').tabs('close', '数据库管理');
        $('#tt').tabs('add', {
            title: '数据库管理',
            content: '<iframe src="' + ctxPath + '/mdmsDatabase/loadPage" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px" width="100%" height="99.5%" frameborder="0"/>',
            closable: true,
            iconCls: 'icon-diy-database2'
        });
    }

    function userLog() {
        $('#tt').tabs('close', '操作日志查询');
        $('#tt').tabs('add', {
            title: '操作日志查询',
            content:
                '<iframe src="' + ctxPath + '/mdmsUserLog/loadPage" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px" width="100%" height="99.5%" frameborder="0"/>',
            closable: true,
            iconCls: 'icon-diy-log1'
        });
    }

    function guanzhu() {
        $("#guanzhuimg").attr("src", ctxPath + "/images/gongzhonghao.jpg");
        $('#guanzhuDlg').dialog('open').dialog('setTitle', '关注');
    }

    function dataChangeApply() {
        $('#tt').tabs('close', '数据变更申请');
        $('#tt').tabs('add', {
            title: '数据变更申请',
            content:
                '<iframe src="' + ctxPath + '/mdmsDatachangeApply/loadPage" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px" width="100%" height="99.5%" frameborder="0"/>',
            closable: true,
            iconCls: 'icon-diy-datachange1'
        });
    }

    function webTerminal() {
        //去后端捞取拥有权限的服务器
        let submitData = {};
        postJSON(ctxPath + '/mdmsSshserver/queryMyServers', submitData,
            function (data) {
                $('#sshServerInfo').treegrid('loadData', data['serverInfo']);
                $('#sshServerInfo').treegrid('collapseAll');
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });
        $('#sshServerDlg').dialog('open').dialog('setTitle', '远程终端列表');
    }

    function openChangePasswordDlg() {
        $("#changePasswordDlgCloseBtn").css('visibility', 'visible');
        $('#changePasswordDlg').dialog('open').dialog('setTitle', '修改密码');
    }

    function changePassword() {
        if (!$('#changePasswordForm').form('validate')) {
            return;
        }

        let submitData = geneSubmitDataFromForm("#changePasswordForm", {});
        if (submitData['userPassword'] != submitData['repeatUserPassword']) {
            $.messager.show({
                title: '提示',
                msg: '两次输入的新密码不一致',
                showType: 'show'
            });
            return;
        }

        //登录
        postJSON(ctxPath + '/login/getOtp', {},
            function (data) {
                let otpcode = data['otpcode'];
                let otp = data['otp'];
                setMaxDigits(130);
                let rsakey = new RSAKeyPair("10001", "10001", otp, 512); //公钥
                let password = sha1(submitData['userPassword']);
                let passwordenc = encryptedString(rsakey, password, RSAAPP.PKCS1Padding);
                console.log('passwordenc:' + passwordenc);
                submitData['userPassword'] = passwordenc;
                let oldpassword = sha1(submitData['oldUserPassword']);
                let oldpasswordenc = encryptedString(rsakey, oldpassword, RSAAPP.PKCS1Padding);
                console.log('oldpasswordenc:' + oldpasswordenc);
                submitData['oldUserPassword'] = oldpasswordenc;
                submitData['otpCode'] = otpcode;

                delete submitData['repeatUserPassword'];

                postJSON(ctxPath + '/mdmsUser/changePassword', submitData,
                    function (data) {
                        $.messager.alert('提示', '密码修改成功，请重新登录!', '', function () {
                            window.location = ctxPath + '/';
                        });
                        $('.panel-tool-close').hide();
                    }, function (result, resultdesc) {
                        $.messager.show({
                            title: '异常',
                            msg: result + '-' + resultdesc,
                            showType: 'show'
                        });
                    }, function () {
                        alert(3)
                    }, function () {
                        $.messager.progress(COMMONPARAM_PROCESS);
                    }, function () {
                        $.messager.progress('close');
                    });

            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });
    }

    function logout() {
        // window.location = ctxPath + '/';
        postJSON(ctxPath + '/login/logout', {},
            function (data) {
                window.location = ctxPath + '/';
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });

    }

    $('#databaseSelect').combobox({
        onChange: function (newValue, oldValue) {
            //查询该数据库下面所有的表
            let submitData = {};
            submitData['id'] = newValue;
            postJSON(ctxPath + '/mdmsDatabase/queryAllTables', submitData,
                function (data) {
                    $('#databaseInfo').treegrid('loadData', data['dbInfo']);
                }, function (result, resultdesc) {
                    $.messager.show({
                        title: '异常',
                        msg: result + '-' + resultdesc,
                        showType: 'show'
                    });
                }, function () {
                    alert(3)
                }, function () {
                    $.messager.progress(COMMONPARAM_PROCESS);
                }, function () {
                    $.messager.progress('close');
                });
        }
    });
</script>

</body>